/******************************************************************************************
 * Import
 ******************************************************************************************/
import _ from 'lodash';
import React, {Component} from 'react';
import { StyleSheet, TextInput, View, Dimensions, ScrollView } from 'react-native';
import Design from '../../../design';
import Config from '../../../config';
import ScreenBase from '../../../library/base/screen';
import { Toast, SearchBar, Carousel } from 'antd-mobile-rn';
import { ListItem, CheckBox, Body, List, Button, Icon, Text, Content } from 'native-base';
// import SplashScreen from 'react-native-splash-screen';
import {
    CAround, CBetween, CCenter, CColumn, CHand, CItemX, CItemY, CLine, CRow, CWrap, 
    CIcon, CImage, CSvg, CText,
    CContent, CFloat, CFooter, CHeader, CPage, CSide, 
    CEmpty, CError, CFail, CSkeleton, 
    CLabel, CButton
} from '../../../library/comp';
import {
    HttpText, HttpHesq
} from '../../../library/func';

// svg
import Licon from '../../../library/comp/project/icon';

// 引入组件
import Proj_Home_List from '../../../library/comp/project/homeList/proj_Home_List'


/******************************************************************************************
 * Screen
 ******************************************************************************************/
export default class ScreenList extends ScreenBase {
    constructor(props) {
        super(props);
        this.state = {
            // 搜索 value值
            searchWord:'',
            // 轮播图数组
            carouselList:[
                'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg',
                'http://image.cdn.hesq.com.cn/rushbuy/banner/20181114/1542160013858bsnl.jpg',
                'http://image.cdn.hesq.com.cn/rushbuy/banner/20181114/1542160013858bsnl.jpg',
                'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542164973540zpkr.jpg',
            ],
            // tab切换
			tabList:[
				{title:'今日上新', index:1},
				{title:'热销爆款', index:2}
			],
            tab:1,
            tabClass:[
                {
                    borderBottomWidth: 2,
                    borderBottomColor:'#cb302e',
                    color: '#cb302e',
                    fontSize:14,
                    paddingBottom:10
                },
                {
                    borderBottomWidth: 2,
                    borderBottomColor:'transparent',
                    color: '#434343',
                    fontSize:14,
                    paddingBottom:10
                }
            ],
			// 获取屏幕高度
			scrollHeight: Dimensions.get('window').height,
			// 获取屏幕宽度
			scrollWidth: Dimensions.get('window').width,
			// tabbarclass
			tabbarClass: 'null',
			tabbarIndicatorHeight: 0,
			// 滚动的距离
            scroll: 0,
            // 定位距离
            scrolltop: 0,
			// 首页数据
			// banner图
			banner: [],
			// 类别
			cat:[],
			// 广告
			advert:{
				url:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2853350006,97808151&fm=26&gp=0.jpg'
			},
			// 今日上新商品
			new_prod:[
                {
                    set_name:'【人气水果】泰国香水椰青111个装（单果750-1000g）',
                    set_price:30,
                    set_original_price:10,
                    count_sale:111,
                    object:{
                        set_image_home:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542174966587gu9i.jpg'
                    }
                }
            ],
			// 热销爆款商品
			hot_prod:[
                {
                    set_name:'【人气水果】泰国香水椰青1个装（单果750-1000g）',
                    set_price:30,
                    set_original_price:10,
                    count_sale:111,
                    object:{
                        set_image_home:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542174966587gu9i.jpg'
                    }
                },
                {
                    set_name:'【人气水果】高山黄金蜜署3斤装',
                    set_price:30,
                    set_original_price:10,
                    count_sale:111,
                    object:{
                        set_image_home:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542174966587gu9i.jpg'
                    }
                },
                {
                    set_name:'【人气水果】泰国香水椰青1个装（单果750-1000g）',
                    set_price:30,
                    set_original_price:10,
                    count_sale:111,
                    object:{
                        set_image_home:'http://image.cdn.hesq.com.cn/rushbuy/product/20181114/1542174966587gu9i.jpg'
                    }
                }
            ],
			current:0,
			// 用户信息
			userInfo: {},
			// 页面分享标题，图片
			share_title: '每日一达',
			share_img: '20181123/sharenormal.jpg'
        }
    }

    // 监听页面scrollview滚动距离
	onScroll(e){
		// wx.createSelectorQuery().select('#tabbarIndicator').boundingClientRect(rect => {
			// // // console.log(rect.top)
			if (rect.top - 45 <= 0) {
				if (this.state.tabbarClass == 'position') return;
				this.setState({
					tabbarClass: 'position',
					tabbarIndicatorHeight: 90
				})
			} else {
				if (this.state.tabbarClass == '') return;
				this.setState({
					tabbarClass: 'null',
					tabbarIndicatorHeight: 0
				})
			}
		//  }).exec();
		 // // console.log(this.state.tabbarIndicatorHeight);
    }
    
    // tab切换
	tab(index){
        
        // this.state.tab = index;
        this.setState({
            tab:index
        })
           
		
	}

    //   搜索
    searchWord = (value)=> {
		this.setState({
            searchWord: value,
            
		})
	}
    // 总render
    render() {
        let color = this.state.tab == 1 ? 'red':'yellow';
        let style = {
            backgroundColor:color
        }
        return (
            <CPage>
                <CContent mt='90'
                    // alwaysBounceVertical={true}
                >

                    {/* 轮播图 */}
                    <Carousel
                        autoplay={true}
                        infinite
                        dotStyle={{backgroundColor:'rgba(255,255,255,.5)',width:6,height:6}}
                        dotActiveStyle={{backgroundColor:'rgba(0,0,0,.5)',width:10}}
                        // afterChange={index => console.log('slide to', index)}
                    >
                        {
                            this.state.carouselList.map( (item) => {
                                return(
                                    <View style={{height:200}}>
                                        <CImage source={{uri:item}} style={{width:'100%',height:200}} />
                                    </View>
                                )
                            })
                        }
                    </Carousel>

                    {/* 导航 */}
                    <CBetween pa='30'>
                        <CItemY x='center' y='center'>
                            <CHand w='85' h='85' ra='8' bg='#f04d3d' x='center' y='center'>
                                <CIcon icon={ Licon["shop-stroew"] } color='#fff' w='58' h='58' />
                            </CHand>
                            <CText size='23' color='#5e5e5e' mt='10'>水果</CText>
                        </CItemY>
                        <CItemY x='center' y='center'>
                            <CHand w='85' h='85' ra='8' bg='#f04d3d' x='center' y='center'>
                                <CIcon icon={ Licon["shop-stroew"] } color='#fff' w='58' h='58' />
                            </CHand>
                            <CText size='23' color='#5e5e5e' mt='10'>食材</CText>
                        </CItemY>
                        <CItemY x='center' y='center'>
                            <CHand w='85' h='85' ra='8' bg='#f04d3d' x='center' y='center'>
                                <CIcon icon={ Licon["shop-stroew"] } color='#fff' w='58' h='58' />
                            </CHand>
                            <CText size='23' color='#5e5e5e' mt='10'>家居</CText>
                        </CItemY>
                        <CItemY x='center' y='center'>
                            <CHand w='85' h='85' ra='8' bg='#f04d3d' x='center' y='center'>
                                <CIcon icon={ Licon["shop-stroew"] } color='#fff' w='58' h='58' />
                            </CHand>
                            <CText size='23' color='#5e5e5e' mt='10'>鲜花</CText>
                        </CItemY>
                        <CItemY x='center' y='center'>
                            <CHand w='85' h='85' ra='8' bg='#f04d3d' x='center' y='center'>
                                <CIcon icon={ Licon["shop-stroew"] } color='#fff' w='58' h='58' />
                            </CHand>
                            <CText size='23' color='#5e5e5e' mt='10'>零食</CText>
                        </CItemY>
                    </CBetween>

                    {/* 广告图 */}
                    <CRow bg='#fff' px='20' py='30' mb='20' style={{width:'100%'}}>
						<CImage source={{uri:'http://image.cdn.hesq.com.cn/rushbuy/assets/20181113/advert.png'}} style={{width:'100%',height:100}}/>
					</CRow>

                    {/* 商品 */}
					<CRow id='tabbar' bg='#fff' pt='25' >
						<CAround>
							{this.state.tabList.map(item=>{
								return (
                                    this.state.tab == item.index ? (
                                        <Text style={this.state.tabClass[0]} onPress={_=>this.tab(item.index)}>
                                            {item.title}
                                        </Text>
                                    ) : (
                                        <Text style={this.state.tabClass[1]} onPress={_=>this.tab(item.index)}>
                                            {item.title}
                                        </Text>
                                    )
									
								)
							})}
						</CAround>
					</CRow>
					<CHand id='tabbarIndicator' bg='#fff'>

					</CHand>


                    <CColumn bg='#fff' pa='20' pt='35' scroll={this.state.scroll} scrolltop={this.state.scrolltop} >
						{ this.state.tab == 1 ? this.state.hot_prod.map((item,index)=>{
							return (
								<Proj_Home_List style={{width:'100%',borderWidth:1,borderColor:'#eaeaea',borderStyle:'solid',overflow:'hidden', borderRadius: 30, marginBottom: 30}} isvip={this.state.userInfo.is_vip} data={item}></Proj_Home_List>
							)
						}) : 
							this.state.new_prod.map((item,index)=>{
								return (
									<Proj_Home_List style={{width:'100%',borderWidth:1,borderColor:'#eaeaea',borderStyle:'solid',overflow:'hidden', borderRadius: 30, marginBottom: 30}} isvip={this.state.userInfo.is_vip} data={item}></Proj_Home_List>
								)
							})
						}
					</CColumn>
                </CContent>
                {/* 顶部 star */}
                <CHeader h='90' y='center' bg='#fff'>
                    <CBetween h='90' px='10' bg='#fff' style={{width:'100%'}}>
                        <CHand df>
                            <CIcon color="#434343" w='38' h='38' icon={ Licon.gobcak }></CIcon>
                        </CHand>
                        <CItemX f='1' bg='#f5f5f5' x='center' y='center' h='50' mx='10'>
                            <CIcon icon={ Licon["shop-seach"]} w='30' h='30' color='#a8a8a8'></CIcon>
                            <CText color='#a8a8a8' size='21'>请输入商品名称</CText>
                        </CItemX>
                        <CItemY x='center' y='center' df>
                            <CIcon icon={ Licon["shop-gouwche"]} w='38' h='38' color='#a8a8a8'></CIcon>
                            <CText size='15' color='#a8a8a8'>购物车</CText>
                        </CItemY>
                    </CBetween>
                </CHeader> 
                {/* 顶部 star */}
            </CPage>
        )
    }
}

